<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js检索日期信息</title>
	<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
	<style>
		.table-wrap{padding: 20px;}
		.retrieval-date{padding: 2px 10px;}
		.tr-timeBox{background-color: #efefef;}
		.time-tips{display: inline-block;padding: 2px 10px;border: 1px solid #39f;color: #39f;border-radius: 3px;}
	</style>
</head>
<body>
	<div id="app">
		<div class="table-wrap">
			<table id="bootstrapTable" class="table">
				<tbody>
					<tr>
						<td>
							<div class="retrieval-date">2018-7-20</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="retrieval-date">2018-7-20</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="retrieval-date">2018-7-20</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="retrieval-date">2018-7-20</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="retrieval-date">2018-7-19</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="retrieval-date">2018-7-19</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="retrieval-date">2018-7-19</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="retrieval-date">2018-7-18</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="retrieval-date">2018-7-18</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
	<script>
		$(function(){
			var utils = {
				/**
				 * 获取日期
				 * @dayCount 获取dayCount天后的日期
				 */
				GetDateStr:function(dayCount){
					var dd = new Date();
					dd.setDate(dd.getDate()+dayCount);
					var y = dd.getFullYear();
					var m = dd.getMonth()+1;
					var d = dd.getDate();
					return y+"-"+m+"-"+d;
				},
				/**
				 * 日期比较
				 * @day1 获取今天日期
				 * @day2 获取昨天日期
				 */
				compareDate:function(date){
					var s = Date.parse(date);
					var day1 = Date.parse(utils.GetDateStr(0));
					var day2 = Date.parse(utils.GetDateStr(-1));
					if(s == day1){
						str = '今日';
					}else if(s == day2){
						str = '昨日';
					}else{
						str = date;
					};
					return str;
				},
				/**
				 * 检索日期
				 * @$el  检索对比目标DOM
				 */
				retrievalDate:function(el,tr){
					var $el = $(el);
					var arr = [];
					var result = [];
					var timelength = $el.length;
					// 新建一个时间数组
					for(var i = 0; i < timelength; i++){
						arr.push($el[i].innerHTML);
					};
					// 去重并渲染提示文本
					for(var j = 0; j < arr.length; j++){
						if (result.indexOf(arr[j])==-1) {
							result.push(arr[j]);
							if(tr == null || tr == ''){
								$el.eq(j).before('<div class="time-tips">'+ utils.compareDate(arr[j]) +'</div>');
							}else{
								$el.eq(j).parents(tr).before('<tr class="tr-timeBox"><td colspan="5"><div class="time-tips">'+ utils.compareDate(arr[j]) +'</div></td></tr>');
							}
						};
					};
				}
			};
			
			utils.retrievalDate('.retrieval-date','tr');
		});
	</script>
</body>
</html>